<template>
	<view>
		<c-topbar></c-topbar>
		<view class="search">
			<u-search :height="74" :placeholder="['查找计划', '追寻想法'][activeTab]" bg-color="#fff" animation :show-action="false"></u-search>
		</view>
		<c-tabbar @active="active" @add="add"></c-tabbar>
		
		<view v-show="activeTab === 0">
			<c-calendar></c-calendar>
			<c-time-line></c-time-line>
		</view>
		<view v-show="activeTab === 1">
			<c-memo></c-memo>
		</view>
		
		<u-mask :show="showTodo" :zoom="false" @click="showTodo = false"/>
		<view v-if="showTodo" class="boxStyle">
			<gal-css-animate :animateName="animateName" duration=".3s" timingFunction="ease-in-out">
				<view class="input-box">
					<c-todo-edit />
				</view>
			</gal-css-animate>
		</view>
		
		<u-mask :show="showMemo" :zoom="false" @click="showMemo = false"/>
		<view v-if="showMemo" class="boxStyle">
			<gal-css-animate :animateName="animateName" duration=".3s" timingFunction="ease-in-out">
				<view class="input-box">
					<c-memo-edit :adjust-position="false" placeholder="请输入内容" @editOk="editOk" uploadFileUrl="/#" />
				</view>
			</gal-css-animate>
		</view>
		
<!-- 		<hqs-popup title="弹窗标题" v-model="showTodo">
		    <c-todo-edit v-if="showTodo"/>
		</hqs-popup> -->
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				activeTab: 0,
				showMemo: false,
				showTodo: false,
				textareas: '请输入内容...',
				animateName : 'fadeInUp',
				bh: 200,
				list: [{ name: 'test1' }, { name: 'test2' },{ name: 'test3' }, { name: 'test4' }]			}
		},
		onLoad() {
			uni.onKeyboardHeightChange(res => {
				// const height = res.height
				// if(this.bh < height) {
				// 	this.bh = height + 100
				// }
				console.log(res.height)
			})
		},
		onShow() {
			
		},
		methods: {
			active(i) {
				this.activeTab = i
			},
			add(i) {
				if(i == 1) {
					this.showMemo = true;
				} else {
					this.showTodo = true;
				}
			},
			editOk(res) {
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F0F3F6;
	}
	.search {
		margin: 30rpx;
	}
	.input-box {
		background: #FFFFFF !important;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
	}
	.boxStyle {
		left:0;
		bottom: 0;
		width: 100%;
		position: fixed;
		z-index: 10071;
	}
</style>
